﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>区块链共享单车管理首页</title>
    <link rel="stylesheet" href="layui/css/layui.css" />
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        .text {
            font-size: 24px;
            color: #333;
            text-align: center;
            margin: 150px auto;
        }
        .site-demo-active {
            display: inline-block;
            font-size: 16px;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            margin: 10px;
        }
        .site-demo-active:hover {
            background-color: #0056b3;
        }
        .layui-header {
            background-color: #007bff;
            color: #fff;
        }
        .layui-logo {
            font-size: 24px;
            padding: 15px 20px;
        }
        .layui-layout-admin {
            background-color: #fff;
        }
        .layui-nav a {
            color: #333;
        }
        .layui-nav .layui-nav-item dd a {
            color: #007bff;
        }
        .layui-tab {
            margin-left: 200px;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo" style="margin-top:-12px;width: 241px;font-size: 21px;color: white">区块链共享单车管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <p id="welcome"></p>
                <dl class="layui-nav-child">
                    <dd><a id="update">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a id="exit">安全退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div id="navBarId" class="layui-side-scroll" lay-filter="test">
            <!-- 左侧垂直导航区域-->
        </div>
    </div>

    <!--tab标签-->
    <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
        <ul class="layui-tab-title"></ul>
        <div class="layui-tab-content">
            <p class="text">欢迎登录区块链共享单车管理系统，请点击左侧选择你要进行的操作.</p>
        </div>
    </div>

</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/public.js"></script>
<script src="layui/layui.js"></script>
<script>
    // 导航菜单的间隔像素
    var menuCell = 5;
    layui.use('element', function () {
        var geturl=url+menu.showByRoleId;
        var element = layui.element;
        var $ = layui.jquery;
        //获取所有的菜单
        $.ajax({
            type: "POST",
            url: geturl,
            data:JSON.stringify({roleId:localStorage.getItem("roleID")}),
            contentType: 'application/json',
            success: function (data) {
                if (data.status==-2) {
                    layer.confirm('身份过期，重新登录',{btn:['知道了'],
                        cancel: function(index, layero){
                            //取消操作，点击右上角的X
                            location.href = "login.html";
                        }},function(index){
                        location.href = "login.html";
                    });
                }else{
                    var liStr = "";
                    // 遍历生成主菜单
                    console.log(data)
                    for (var i = 0; i < data.data.length; i++) {
                        // 判断是否存在子菜单
                        if (data.data[i].children != null && data.data[i].children.length > 0) {
                            // console.log("--> " + JSON.stringify(data[i].childMenus));
                            liStr += "<li class=\"layui-nav-item\"><a class=\"\" href=\"javascript:;\" data-src=\"" + data.data[i].cname + "\" data-menuid=\"" + data.data[i].id + "\" data-title=\"" + data.data[i].menuName + "\">" + data.data[i].menuName  + "</a>\n" +
                                "<dl class=\"layui-nav-child\">\n";
                            // 遍历获取子菜单
                            for (var k = 0; k < data.data[i].children.length; k++) {
                                liStr += getChildMenu(data.data[i].children[k], 0);
                            }
                            liStr += "</dl></li>";
                        } else {
                            liStr += "<li class=\"layui-nav-item\"><a class=\"site-demo-active\" data-src=\"" + data.data[i].cname + "\" data-menuid=\"" + data.data[i].id + "\" data-title=\"" + data.data[i].menuName + "\">" + data.data[i].menuName + "</a></li>";
                        }
                    };
                    $("#navBarId").html("<ul class=\"layui-nav layui-nav-tree\"  lay-filter=\"test\">\n" + liStr + "</ul>");
                    element.init();
                }
            }
        });
    });


    // 递归生成子菜单
    function getChildMenu(subMenu, num) {
        // console.log("num: " + num);
        num++;
        var subStr = "";
        if (subMenu.children != null && subMenu.children.length > 0) {
            subStr += "<dd><ul><li class=\"layui-nav-item\" ><a style=\"margin-Left:" + num * menuCell + "px\" class=\"site-demo-active\" href=\"javascript:;\" data-src=\"" + subMenu.url + "\" data-menuid=\"" + subMenu.id + "\" data-title=\"" + subMenu.title + "\">" + subMenu.title + "</a>" +
                "<dl class=\"layui-nav-child\">\n";
            for (var j = 0; j < subMenu.children.length; j++) {
                subStr += getChildMenu(subMenu.children[j], num);
            }
            subStr += "</dl></li></ul></dd>";
        } else {
            subStr += "<dd><a style=\"margin-Left:" + num * menuCell + "px\" class=\"site-demo-active\" data-src=\"" + subMenu.url + "\" data-menuid=\"" + subMenu.id + "\" data-title=\"" + subMenu.title + "\">" + subMenu.title + "</a></dd>";
        }
        return subStr;
    }

    function xuanran() {
        layui.use(['element'], function () {
            var element = layui.element;

            var layFilter = $("#navBarId").attr('lay-filter');
            element.render('nav', layFilter);

            var active = {
                //在这里给active绑定几项事件，后面可通过active调用这些事件
                tabAdd: function (cname, id, menuName) {
                    //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                    // var body_url = "pages/" + url + ".html";
                    var body_url = "http://localhost:8082/sharedBikes_web/sonMenus"+cname+".html";
                    // console.log("要切换的页面地址=" + body_url);
                    $(".text").remove();
                    element.tabAdd('demo', {
                        title: menuName,
                        content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + body_url + '" style="width:100%;height:545px;"></iframe>',
                        id: id //规定好的id
                    })
                    FrameWH();  //计算ifram层的大小
                },
                tabChange: function (id) {
                    //切换到指定Tab项
                    element.tabChange('demo', id); //根据传入的id传入到指定的tab项
                },
                tabDelete: function (id) {
                    element.tabDelete("demo", id);//删除
                }
            };
            // //当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
            $(document).on("click", ".site-demo-active", function () {
                var dataid = $(this);
                if (dataid.children().length <= 1) {
                    if ($(".layui-tab-title li[lay-id]").length <= 0) {
                        active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"), dataid.attr("data-title"));
                    } else {
                        var isData = false;
                        $.each($(".layui-tab-title li[lay-id]"), function () {
                            if ($(this).attr("lay-id") == dataid.attr("data-menuId")) {
                                isData = true;
                            }
                        })
                        if (isData == false) {
                            active.tabAdd(dataid.attr("data-src"), dataid.attr("data-menuId"), dataid.attr("data-title"));
                        }
                    }
                    active.tabChange(dataid.attr("data-menuId"));

                }
            });
        })
        // console.log("==列表添加完后再次执行渲染");
    }

    xuanran();
    function FrameWH() {
        var h = $(window).height();
        $("iframe").css("height",h+"px");
    }
    layui.use('layer', function () {
        var layer = layui.layer;
        $("#exit").click(function () {
            layer.confirm('确认要退出吗？', function(index){
                window.localStorage.clear();
                location.href = "login.html";
            });
        })
    });

    // storage.getItem("roleName");
    $("#welcome").html("欢迎登录("+localStorage.getItem("roleName")+")，"+localStorage.getItem("userName"));

    $("#update").click(function () {
        layer.open({
            type:2,
            title:'修改密码',
            area: ['60%', '70%'], //宽高
            content: 'updatePassword.html',
            offset:'40px'
        });
    })

</script>
</body>
</html>